<!-- components/reconciliation/ConfidenceIndicator.vue -->
<template>
  <div class="confidence-indicator">
    <el-progress
      :percentage="confidence"
      :show-text="false"
      :stroke-width="6"
      :color="confidenceColor"
      class="confidence-progress"
    />
    <div class="confidence-info">
      <span class="confidence-value">{{ confidence }}%</span>
      <el-tag 
        :type="statusTagType" 
        size="small"
        class="status-tag"
      >
        {{ statusText }}
      </el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  confidence: number
  status: 'confirmed' | 'pending' | 'rejected'
}>()

const confidenceColor = computed(() => {
  if (props.confidence >= 90) return '#67c23a' // 绿色
  if (props.confidence >= 70) return '#e6a23c' // 黄色
  return '#f56c6c' // 红色
})

const statusTagType = computed(() => {
  switch (props.status) {
    case 'confirmed': return 'success'
    case 'pending': return 'warning'
    case 'rejected': return 'danger'
    default: return 'info'
  }
})

const statusText = computed(() => {
  switch (props.status) {
    case 'confirmed': return '已确认'
    case 'pending': return '待确认'
    case 'rejected': return '已拒绝'
    default: return '未知'
  }
})
</script>

<style scoped>
.confidence-indicator {
  width: 100%;
}

.confidence-progress {
  margin-bottom: 8px;
}

.confidence-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confidence-value {
  font-weight: 600;
  font-size: 14px;
}

.status-tag {
  height: 20px;
  line-height: 18px;
}
</style>